<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>导航栏</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="container">
        <div id="toper">
            <img class="logo" src="http://www.qfedu.com/images/index2021/logo-edu.png" alt="Logo">
            <b id="top_title"><h3>路由器防火墙</h3></b>
            <div id="userInfo">
                <b id="username"></b>
            </div>
            <img id="userHead" class="img-circle" src="" alt="用户头像">
        </div>

        <div id="main">
            <div id="nav">
                <div class="box shadow">
                    <a  data-page="rules.html">路由规则管理</a>
                    <div class="circle"></div>
                </div>

                <div class="box shadow">
                    <a  data-page="M.html">敏感词管理</a>
                    <div class="circle"></div>
                </div>

                <div class="box shadow">
                    <a  data-page="D.html">数据源管理</a>
                    <div class="circle"></div>
                </div>

                <div class="box shadow">
                    <a  data-page="G.html">网关浏量统计</a>
                    <div class="circle"></div>
                </div>

                <div class="box shadow">
                    <a data-page="ARP.html">路由ARP</a>
                    <div class="circle"></div>
                </div>

                <div class="box shadow" style="margin-bottom: 0; margin-top: auto;">
                    <a  onclick="logout()">退出</a>
                    <div class="circle"></div>
                </div>
            </div>
            <div id="content">
                <iframe id="contentFrame" src=""></iframe>
            </div>
        </div>
        <div id="footer">
            &copy; 版本所有 @千锋西安-IoT2402
        </div>
    </div>
    <script>
        window.onload = function () {
            // 登录状态检查
            if (!localStorage.getItem("uid")) {
                location.href = "/login.html";  // 未登录则跳转至登录页面
            } else {
                userInfo.innerText = localStorage.nickname;
                userHead.setAttribute("src", localStorage.head);
            }

            // 为导航链接绑定点击事件
            const navLinks = document.querySelectorAll('#nav a');
            navLinks.forEach(link => {
                link.addEventListener('click', function (event) {
                    event.preventDefault();  // 阻止默认跳转行为
                    const page = this.getAttribute('data-page');  // 获取页面路径
                    document.getElementById('contentFrame').src = page;  // 更新 iframe 的 src
                });
            });
        };

        // 退出登录并跳转到登录页面
        function logout() {
            localStorage.clear();
            location.href = 'login.html';
        }
    </script>
</body>

</html>